<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>黑名单列表</title>
    <link rel="stylesheet" href="../res/layui/css/layui.css">
    <style>
        #userInfoDialog {
            padding: 20px;
            width: 400px;
            display: none; /*隐藏层*/
        }

        #userInfoDialog p {
            padding: 10px 0;
        }
    </style>


</head>
<body>
<div class="layui-fluid">
    <div class="layui-card">
        <div class="layui-card-header">黑名单列表</div>
        <div class="layui-card-body">
            <table id="blacklist" lay-filter="blacklistFilter"></table>
        </div>
    </div>
</div>
<!--用户信息对话框-->
<div id="userInfoDialog">
    <table class="layui-table" lay-size="sm">
        <tr>
            <td>头像</td>
            <td><img id="headimg" src="" alt=""></td>
        </tr>
        <tr>
            <td>用户名</td>
            <td><span id="username"></span></td>
        </tr>
        <tr>
            <td>昵称</td>
            <td><span id="nickname"></span></td>
        </tr>
        <tr>
            <td>性别</td>
            <td><span id="sex"></span></td>
        </tr>
        <tr>
            <td>电话</td>
            <td><span id="phone"></span></td>
        </tr>
        <tr>
            <td>生日</td>
            <td><span id="birth"></span></td>
        </tr>
        <tr>
            <td>注册时间</td>
            <td><span id="regtime"></span></td>
        </tr>
        <tr>
            <td>个性签名</td>
            <td><span id="mark"></span></td>
        </tr>
    </table>
</div>

<script src="../res/layui/layui.js"></script>
<script>
    layui.use(function () {
        //加载获取table模块
        var table = layui.table;
        //加载获取layer弹层模块
        var layer = layui.layer;
        //加载jquery对象
        var $ = layui.jquery;
        
        //渲染黑名单列表表格（只显示被禁用的用户）
        table.render({
            elem: '#blacklist',
            url: '/user/blacklist',
            page: true,
            cols: [[
                {field: 'id', title: '用户ID', width: 80},
                {field: 'username', title: '用户名', minWidth: 120},
                {field: 'nickname', title: '昵称', minWidth: 120},
                {field: 'sex', title: '性别', width: 80, templet: function(d) {
                    return d.sex === 1 ? '男' : d.sex === 0 ? '女' : '保密';
                }},
                {field: 'phone', title: '手机号', width: 120},
                {field: 'createTime', title: '注册时间', width: 160, templet: function(d) {
                    return layui.util.toDateString(d.createTime, 'yyyy-MM-dd HH:mm:ss');
                }},
                {title: '操作', width: 180, templet: '#rowTools', fixed: 'right'}
            ]]
        });
        
        //监听表格工具栏事件
        table.on('tool(blacklistFilter)', function(obj) {
            var data = obj.data;
            if (obj.event === 'details') {
                //查看详情
                layer.open({
                    type: 1,
                    title: '用户详情',
                    content: $('#userInfoDialog'),
                    area: ['500px', '400px']
                });
                //填充详情数据
                $('#headimg').attr('src', data.headImg || '../res/img/default_head.jpg');
                $('#username').text(data.username);
                $('#nickname').text(data.nickname);
                $('#sex').text(data.sex === 1 ? '男' : data.sex === 0 ? '女' : '保密');
                $('#phone').text(data.phone || '未设置');
                $('#birth').text(data.birth || '未设置');
                $('#regtime').text(layui.util.toDateString(data.createTime, 'yyyy-MM-dd HH:mm:ss'));
                $('#mark').text(data.mark || '暂无个性签名');
            } else if (obj.event === 'del') {
                //删除操作
                layer.confirm('确定要删除该用户吗？', function(index) {
                    $.get('/user/delete', {id: data.id}, function(resp) {
                        if (resp.code === 0) {
                            layer.msg('删除成功', {icon: 1});
                            obj.del();
                        } else {
                            layer.msg(resp.msg || '删除失败', {icon: 2});
                        }
                    });
                    layer.close(index);
                });
            } else if (obj.event === 'restore') {
                //恢复用户（从黑名单中移除）
                layer.confirm('确定要恢复该用户吗？', function(index) {
                    $.get('/user/updateStatus', {id: data.id, status: 0}, function(resp) {
                        if (resp.code === 0) {
                            layer.msg('恢复成功', {icon: 1});
                            obj.del();
                        } else {
                            layer.msg(resp.msg || '恢复失败', {icon: 2});
                        }
                    });
                    layer.close(index);
                });
            }
        });
    })
</script>


<!--操作栏自定义模板-->
<script id="rowTools" type="text/html">
    <div class="layui-btn-container">
        <button class="layui-btn layui-btn-normal layui-btn-xs" lay-event="details">
            <i class="layui-icon layui-icon-list"></i>
            详情
        </button>
        <button class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">
            <i class="layui-icon layui-icon-delete"></i>
            删除
        </button>
        <button class="layui-btn layui-btn-warm layui-btn-xs" lay-event="restore">
            <i class="layui-icon layui-icon-ok-circle"></i>
            恢复
        </button>
    </div>
</script>


</body>
</html>